<template>
  <el-button type="primary" @click="dialogVisible = true" :disabled="!!props.orderInfo.trackingNumber">
    订单发货
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="订单发货"
    width="800"
    destroy-on-close
    append-to-body
  >
    <el-descriptions :title="`订单编号 ${props.orderInfo?.orderNumber}`" border>
      <el-descriptions-item label="订单金额" width="100px">111@todo</el-descriptions-item>
      <el-descriptions-item label="收货人" width="100px">{{ props.orderInfo?.receiverInfo.receiverIdName }}</el-descriptions-item>
      <el-descriptions-item label="手机号码" width="100px">{{ props.orderInfo?.receiverInfo.receiverPhoneNumber }}</el-descriptions-item>
      <el-descriptions-item label="提交时间" span="1" width="100px">{{props.orderInfo?.orderTimeNodeInfo.orderDate}}</el-descriptions-item>
      <el-descriptions-item label="收件地址" span="2">
        {{ props.orderInfo?.receiverInfo.receiverArea }} {{ props.orderInfo?.receiverInfo.receiverAddress }}
      </el-descriptions-item>
      <el-descriptions-item label="物流单号" span="3">
        <el-input v-model="trackingNumber" placeholder="请输入物流单号" style="width: 580px;" />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { orderDelivery } from '@/api/shop';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'

const props = defineProps(["orderInfo", "updateList"])

const dialogVisible = ref(false)
const trackingNumber = ref('')

const handleSubmit = () => {
  if(!trackingNumber.value) {
    ElMessage({
      message: '请输入物流单号',
      type: 'warning',
    })
    return false
  }
  orderDelivery({
    orderNumber: props.orderInfo?.orderNumber,
    trackingNumber: trackingNumber.value
  }).then(() => {
    ElMessage({
      message: '发货成功',
      type: 'success',
    })
    dialogVisible.value = false
    props.updateList()
  })
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
